<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        body {
            margin: 0px;
        }
        .div1 {
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
        .div2 {
            /* 相对定位：不脱标，老家留坑，别人不会把它的位置挤走。
也就是说，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。 
对定位，就两个作用：

（1）微调元素
（2）做绝对定位的参考，子绝父相

相对定位的定位值
left：盒子右移

right：盒子左移

top：盒子下移

bottom：盒子上移

*/
            position: absolute;/*相对定位：相对于自己原来的位置*/
			left: 10px;/*横坐标：正值表示向右偏移，负值表示向左偏移*/
			top: 20px;/*纵坐标：正值表示向下偏移，负值表示向上偏移*/

            width: 200px;
            height: 200px;
            border: 1px solid blue;
        }
    </style>
</head>
<body>

    <div class="div1">有生之年</div>
    <div class="div2">狭路相逢</div>

</body>
</html>